<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript">
function initLogs()
{
	jgrouse.log.addHandler(new jgrouse.logHandlers.ConsoleLog());
}

jgrouse_config = 
{
	initLogs : initLogs,
	logLevel : 'INFO',
	nologs : false,
	debug : true
}
</script>

<script type="text/javascript" src='../src/jgrouse.js'></script>
<script type="text/javascript" src='../src/log.js'></script>
<script type="text/javascript" src='../src/classloader.js'></script>

<style type="text/css">
.over
{
	font-size: 2em;
}
.spicy
{
	color: red;
}

.highlight
{
	background-color: green;
	color: white;
}

.bolder 
{
	font-weight: bold;
}
</style>

<script type="text/javascript">


jgrouse.module(
{
	name:'testContainer', 
	requires:['jgrouse.widgets.StaticText', 'jgrouse.widgets.TemplateParser', 
			  'jgrouse.widgets.InputText', 'jgrouse.widgets.Container', 
			  'jgrouse.widgets.Button', 'jgrouse.widgets.Checkbox', 'jgrouse.widgets.Radiobutton',
			  'jgrouse.widgets.spices.Spices'], 
	imports : ['jgrouse.widgets.TemplateParser', 'jgrouse.dom.Event', 'jgrouse.dom.Element', 'jgrouse.string.*'],  
	body:function(salt)
	{
		eval(salt);

		jgrouse.define('testContainer.Controller', 'jgrouse.util.BaseController', function(salt)
		{
			eval(salt);
			
			return {
				initialize : function()
				{
					_super(this, 'initialize');
					this._data = null;
				},
				
				setData : function(data)
				{
					this._data = data;
				},
				
				setPropOne : function(value)
				{
					if (!!value)
					{
						this._data.propOne = value;
						this._data.propTwo = value + ', bla!';
						//this._data.buttonDisabled = value? value.length % 2 == 1 : false;
						this._data.buttonValue = "input length=" + (value? value.length : 0);
						this._data.stater = value? value.length % 2 == 1 : false;
					}
					else
					{
						this.setPropOne('null');
					}
					
				},
				
				onTriggerButton : function(value)
				{
					this.setPropOne("Roll!" + Math.round(Math.random() * 100));
				},
				
				setRadioValue : function(value)
				{
					this._data.radioValue = value;
					this._data.buttonDisabled = value === 'biteMe';
				}
			}
		});
		
		
	}
});


function initApp()
{
	var item = document.getElementById('appContainer');
	//container = new testContainer.View();
	if (!window.origTemplate)
	{
		origTemplate = item.innerHTML;
	}
	var tp = new jgrouse.widgets.TemplateParser(origTemplate);
	tp.doParse();
	container = tp.getMembers().get('main');
	container.bind(container._ownMvcDriver);
	container.setData({propOne : 'hehehe', buttonValue:'banzai'});
	item.innerHTML = '';
	container.add(item);
}

function doRun()
{
	var s = document.getElementById('area').value;
	var r = eval(s);
	alert(r);
}

function doHide()
{
	container.remove(true);
}

</script>

</head>
<body>
	<div id='zhopa' style='border: thin solid black;'> bla!</div>
	<div id='appContainer' >
		<div _jgtype="container" _controller-class="testContainer.Controller" 
			_jgmember="main" $rollover='rollover' $rollover.class-name='spicy' $rollover.node-member="spicy"
			$stater='highlight' $stater.class-name='highlight' _bindings="$stater.state:stater"
			$stater.node-member="stater"> 
			<input type='text' _jgtype='inputText' _bindings = 'value:propOne'>
			result (spice is set for rollover for a component):<span _jgtype='staticText' _bindings='value:propTwo' 
				$rollover='rollover' $rollover.class-name='over'>stuff</span><br>
			<div _jgmember='spicy' class="bolder">Spicy! (spice set for rollover over DOM element)</div>
			<div _jgmember='stater'>Stater (spice set for highliting of DOM element when number of characters in input is odd)</div>
		</div>
	</div>
	<form >
		<textarea rows="10" cols="80" name="area" id='area'></textarea>
		<input type="button" name="run" value="Run" onclick="doRun()">
		<br>
		<input type='button' name='show' value='show' onclick='initApp()'>
		<input type='button' name='hide' value='hide' onclick='doHide()'>
	</form>
</body>
<script type="text/javascript">

	jgrouse.require('testContainer', function()
	{
		initApp();
	});
</script>
</html>